<template>
	<el-main class="main">
		<div style="width: 50%;">
			<clueInfoForm
				:clueInfo="clueInfo"
				label-width="140"
				ref="studentForm"
			>
				<template #footer>
					<el-form-item>
						<el-button @click="updateStudentInfo" type="primary">更新个人信息</el-button>
					</el-form-item>
				</template>
			</clueInfoForm>
		</div>
	</el-main>
</template>

<script>
import clueInfoForm from "@/views/clue/components/clue-Info-form/index.vue";
import useTabs from '@/utils/useTabs';

export default {
	name: "info",
	components: {
		clueInfoForm,
	},
	data() {
		return {
			clueInfo: {},
			introdStudent: {},
			introEmployee: {}
		}
	},
	mounted() {
		this.getdata()
	},
	methods: {
		getdata() {
			this.$API.clue.detail.get({visitorId: Number(this.$route.params.id) || null}).then(res => {
				this.clueInfo = res.data
				// this.$refs.studentForm.paramsData = res.data
				if (this.clueInfo.name) {
					useTabs.setTitle(this.clueInfo.name + '-资源详情')
				}
			})
		},
		updateStudentInfo(){
			const paramsData = this.$refs.studentForm.paramsData
			const paramsObj = {...paramsData, ...this.clueInfo}
			var newContactsInfos = Array.from(paramsObj.contactsInfos);
			var newContactsInfos1 = [];
			newContactsInfos.forEach(item => {
				newContactsInfos1.push(JSON.parse(JSON.stringify(item)));
			})
			paramsObj.contactsInfos = newContactsInfos1;
			console.log(paramsObj);
			this.$API.clue.update.post(paramsObj).then((resp) => {
				this.$router.push({
					path: "/clue/list"
				})
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	background-color: #fff;
}
.footer {
	display: flex;
	justify-content: center;
	width: 100%;
}
</style>
